<template>
  <div class="mindmap-container" ref="mindMapContainer"></div>
</template>

<script setup lang="ts">
import { ref, onMounted, onUnmounted } from "vue";
import MindMap from "simple-mind-map";

const mindMapContainer = ref<HTMLElement | null>(null);
let mindMap: any = null;

// 思维导图数据
const mindMapData = {
  data: {
    text: "根节点",
    id: "1",
  },
  children: [
    {
      data: {
        text: "分支主题1",
        id: "2",
      },
      children: [
        {
          data: {
            text: "子主题1.1",
            id: "3",
          },
        },
        {
          data: {
            text: "子主题1.2",
            id: "4",
          },
        },
      ],
    },
    {
      data: {
        text: "分支主题2",
        id: "5",
      },
      children: [
        {
          data: {
            text: "子主题2.1",
            id: "6",
          },
        },
        {
          data: {
            text: "子主题2.2",
            id: "7",
          },
        },
      ],
    },
  ],
};

// 配置选项
const mindMapOptions = {
  el: null as HTMLElement | null,
  data: mindMapData,
  readonly: true,
  layout: "catalogOrganization", // 布局类型：mindMap（思维导图）、logicalStructure（逻辑结构图）、catalogOrganization（目录组织图）、organizationStructure（组织结构图）
  theme: {
    // 主题配置
    root: {
      fill: "#ff4d4f",
      color: "#fff",
    },
    second: {
      fill: "#40a9ff",
      color: "#fff",
    },
    branch: {
      fill: "#73d13d",
      color: "#fff",
    },
  },
  style: {
    // 样式配置
    lineWidth: 2,
    lineColor: "#333",
    rootLineColor: "#333",
    lineType: "cubic-bezier", // 连线类型：straight（直线）、cubic-bezier（贝塞尔曲线）、polyline（折线）
  },
};

onMounted(() => {
  if (mindMapContainer.value) {
    mindMapOptions.el = mindMapContainer.value;
    mindMap = new MindMap(mindMapOptions);

    // 监听事件
    mindMap.on("node_click", (node: any) => {
      console.log("点击了节点:", node.nodeData.data);
    });
  }
});

onUnmounted(() => {
  if (mindMap) {
    mindMap.destroy();
  }
});
</script>

<style scoped>
.mindmap-container {
  width: 100%;
  height: 600px;
  border: 1px solid #ddd;
  background-color: #fff;
}
</style>
